<template>
  <div class="dateBar-wrap">
    <!-- 时刻 -->
      <div class="dateBar-time" v-show="curIsShowTimeBar">
        <div class="start-time">
          <cite class="iconfont icon-shijian"></cite>
          <el-time-select
            placeholder="开始时间"
            v-model="curStartTime"
            size="mini"
            @change="changeStartTime"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00'
            }">
          </el-time-select>
        </div>
        <div class="slider">
           <el-slider v-model="curSlideValueTime" range show-stops :max="24" :format-tooltip="timeFormatTooltip" @change="handleTime"></el-slider>
        </div>
        <div class="end-time">
          <el-time-select
            placeholder="结束时间"
            v-model="curEndTime"
            size="mini"
            :picker-options="{
              start: '00:00',
              step: '01:00',
              end: '24:00',
              minTime:curStartTime
            }"
            @change="changeEndTime">
          </el-time-select>
        </div>
        <div class="time-checkbox">
          <el-checkbox v-model="curCheckedTime" @change="changeCheckTime">时间</el-checkbox>
        </div>
      </div>
      <!-- 日期 -->
      <div class="dateBar-date" v-show="curIsShowDateBar">
        <div class="start-date-icon"><cite class="iconfont icon-shijian"></cite></div>
        <div class="start-date">{{curStartDate}}</div>
        <div class="slider">
           <el-slider v-model="curSlideValue" range :max="curMaxValue" :show-tooltip="true" :format-tooltip="dateFormatTooltip" @change="handleSlider"></el-slider>
        </div>
        <div class="end-date">{{curEndDate}}</div>
          <!-- <div class="start-date-cont">
            <el-date-picker 
              v-model="curStartDate"
              format="yyyy年MM月dd日"
              type="date"
              placeholder="开始日期"
              @change="changeStartDate">
          </el-date-picker>
          </div> -->

          <!-- <el-date-picker 
              v-model="curEndDate"
              format="yyyy年MM月dd日"
              type="date"
              placeholder="结束日期"
              @change="changeEndDate">
          </el-date-picker> -->
        
        <!-- 按钮 -->
        <div class="time-checkbox">
          <el-checkbox v-model="checkedDate" disabled>日期</el-checkbox>
        </div>
      </div>
      
  </div>
</template>

<script>
export default {
  name: 'dateBar-wrap',
  computed:{
    // 显示隐藏的日期\时刻\日期段
    curIsShowDateBar(){
      return this.$store.getters['datebar/curIsShowDateBar']
    },
    curIsShowTimeBar(){
      return this.$store.getters['timebar/curIsShowTimeBar']
    },
    // 日期
    curStartDate:{
      get(){
        return this.$store.getters['date/curStartDate']
      },
      set(val){
        this.$store.state.date.startDate = val
      } 
    },
    curEndDate:{
      get(){
        return this.$store.getters['date/curEndDate']
      },
      set(val){
        this.$store.state.date.endDate = val
      } 
    },
    // 返回的所有日期数组
    curDatebarList(){
      return this.$store.getters['datebar/curDatebarList']
    },
    // 解决滑动效果 （v-model与range有点冲突）还需方法触发
    // 日期 slider
    curSlideValue:{
      get(){
        return this.$store.getters['datebar/curSlideValue']
      },
      set(val){
        // 更改滑动条的数组值给slideValue
        this.$store.state.datebar.slideValue = val
      }
    },
    // 时刻 slider
    curSlideValueTime:{
      get(){
        return this.$store.getters['timebar/curSlideValueTime']
      },
      set(val){
        this.$store.state.timebar.slideValueTime = val
      }
    },
    // 日期轴的最大日期
    curMaxValue(){
      return this.$store.getters['datebar/curMaxValue']
    },
    // 时间滑动条是否可选
    // curIsDisabled(){
    //   return this.$store.getters['timebar/curIsDisabled']
    // },
    // 时间是否选中
    // curCheckedTime:{
    //   get(){
    //     return this.$store.getters['timebar/curCheckedTime']
    //   },
    //   set(val){
    //     this.$store.state.timebar.checkedTime = val
    //   }
    // },
     // 三级菜单按钮组
    curBtnGroupActive(){
      return this.$store.getters['curBtnGroupActive']
    },
    // 一级菜单
    defaultMenu(){
      return this.$store.getters.defaultMenu
    },
  },
  watch: {
    curSlideValue(val){
      this.$store.dispatch('date/getStartDate',this.curDatebarList[val[0]])
      this.$store.dispatch('date/getEndDate',this.curDatebarList[val[1]])
    },
    // 监测三级菜单变化时 重置时间轴 日期轴
    curBtnGroupActive(){
      // 每次三级菜单变化 把时刻时间轴位置改为[24,24]
      this.curStartTime = "24:00"
      this.curEndTime = "24:00"
      this.$store.dispatch('timebar/changeValueTime',[24,24]);
      // this.$store.dispatch('timebar/changeSliderTimeIsabled',true);
      // this.$store.dispatch('timebar/changeCheckTime',false);
    },
    // 监测一级菜单变化时 重置时间轴 日期轴
    defaultMenu(){
      //把时刻时间轴位置改为[24,24]
      this.curStartTime = "24:00"
      this.curEndTime = "24:00"
      this.$store.dispatch('timebar/changeValueTime',[24,24]);
      // this.$store.dispatch('timebar/changeSliderTimeIsabled',true);
      // this.$store.dispatch('timebar/changeCheckTime',false);
    },
    curSlideValueTime:{
      handler(val) {
        // 把[8,10]变为时刻显示[8:00,10:00]
        let timeArr = [];
        val.map(item=>{
          let timeR = '';
          if (item < 10) {
              timeR = '0' + item + ':00'
          } else {
              timeR = item + ':00'
          }
          timeArr.push(timeR)
        })
      // 只能直接更改时间变量，如果用计算属性（进行监听 通过方法传参数值） 会导致时刻无法选中下拉的具体时间 
        this.curStartTime = timeArr[0]
        this.curEndTime = timeArr[1]
      },
      deep:true
    }
  },
  data(){
    return {
      curStartTime:'24:00',
      curEndTime:'24:00',
      checkedDate:true
    }
  },
  methods:{
    //  通过数组集合 对滑动条的日期进行处理
    dateFormatTooltip(date) {
      return this.curDatebarList[date]
    },
    timeFormatTooltip(val){
      let timeFormat = '';
      if(val<10){
        timeFormat = '0'+val+':00'
      }else{
        timeFormat = val+':00'
      }
      return timeFormat
    },
    // 日期滑动条获取值
    handleSlider(val){
      val.map(index=>{
        // 更改store中的日期date[]
        this.$store.dispatch('changeSlideDate',this.curDatebarList[index])
      })
    },
    // 时刻滑动条获取值
    handleTime(val){
      val.map(hour=>{
          this.$store.dispatch('changeSlideTime',hour);
      })
    },
    // 时间选框
    // changeCheckTime(val){
    //   // 判断时间是否被选中
    //   if(val==true){
    //     //选中
    //     // 把时刻轴变为可滑动状态
    //     this.$store.dispatch('timebar/changeSliderTimeIsabled',false)
    //   }else{
    //     //不选中
    //     // 把时刻轴变为不可滑动状态
    //     this.$store.dispatch('timebar/changeSliderTimeIsabled',true)
    //   }
    // }
  }
  
 
}
</script>
<style lang="stylus" scoped>
@import url("//at.alicdn.com/t/font_1151041_g48qdn3os8v.css")
@import "../../assets/style/date.styl"
@import "../../assets/style/slider.styl"
.dateBar-wrap
  position absolute
  bottom 16px
  left 20px
  width calc(100vw - 30px - 600px)
  z-index 20
  box-shadow 8px 8px 8px rgba(0, 0,0, 0.5)

  // 按钮
  /deep/
    .el-checkbox__input.is-checked+.el-checkbox__label
      color #13ffd7
  /deep/
    .el-checkbox, .el-checkbox-button__inner,.el-checkbox__inner,.el-checkbox__input.is-focus .el-checkbox__inner
      color #c0c4cc
      border-color #c0c4cc
  /deep/
    .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner
      border-color: #13ffd7;
      background: #13ffd7;

// 日期
.dateBar-date
  height 29px
  border-bottom 1px solid #989898
  background #565656
  border-top-left-radius 10px
  display flex
  // position relative

  > div
    flex 1

  .start-date-cite
    height 30px
    
  .end-date
    position absolute
    right 70px
    bottom 0

.start-date-cite
    position absolute
    left 0
    top 0
    width 29px
    height 28px
    border-top-left-radius 10px
    border 1px solid #97989c
    border-right 0
    border-bottom 0

.start-date 
  .start-date-cont
    position absolute
    left 29px
    top 0

.slider
  position absolute
  top 0
  left 213px
  width calc(100vw - 30px - 710px - 474px)
  padding-left 40px
  z-index 20

.time-checkbox
    position absolute
    right 20px
    top 3px

// 时刻
.dateBar-time
  position relative
  height 30px
  background #565656
  border-top-left-radius 10px
  margin-bottom 10px

  .end-time
    position absolute
    right 110px
    top 0

.dateBar-time
  .start-time
    position absolute
    left 30px
    top 0
    cite
      position absolute
      left -30px
      top 0
      // background #303030 url(../../assets/time22.png) no-repeat 3px 3px
      width 29px
      height 28px
      border-top-left-radius 10px
      border 1px solid #97989c
      border-right 0
      border-bottom 0

  .time-checkbox
    position absolute
    right 20px
    top 3px

// 时刻输入框
.dateBar-time 
  /deep/ .el-date-editor.el-input, .el-date-editor.el-input__inner
    width 179px
  
  /deep/ .el-input__inner
    background: #303030;
    border: 1px solid #97989c;
    color: #e6e6e6;
    border-radius 0
    border-bottom 0
    letter-spacing 1px
    padding-right: 0
    cursor pointer
    font-size 14px

  /deep/ .el-input--mini
    font-size 16px


  /deep/ .el-slider__stop
    height: 6px;
    width: 1px;
    bottom: 0px;
    border-radius: 100%;
    background-color: #000;

.datebar-section
  position absolute
  right 7%
  bottom 30px
  width 1080px
  height 20px
  display flex
  justify-content center

.datebar-section
  ul
    // overflow hidden

.datebar-section
  ul
    li
      float left 
      width 180px
      height 15px
      background #303a58
      cursor pointer
      position relative

.datebar-section
  ul
    li
      span 
        position absolute
        right 35%
        top 20px

.datebar-section
  ul
    li.active
      background #13ffd7

.datebar-section
  ul
    li.active 
      span
        color #13ffd7

.icon-shijian
  color #13ffd7

.icon-shijian:before {
    content: "\e62d";
    margin-left: 6px;
    margin-top: 5px;
    display: inline-block;
}
</style>



